<template>
  <div class="self_adaption">
    <div class="other">
      <p class="main_text">消息通知</p>
    </div>
    <div class="g-container">
      <div class="nav">
        <ul class="nav_ul">
          <li v-for="(item, index) in nav_list" :key="index" :class="item.class" @click="navChange(item)">
            {{ item.text }}
          </li>
        </ul>
      </div>
      <div class="inform_btn">
        <button class="hollow" style="border-radius: 5px; height: 32px; font-size: 14px" @click="allRead">
          全部已读
        </button>
        <el-button type="danger" plain @click="DelAllMes" style="margin-left: 20px"> 批量删除 </el-button>
      </div>
      <el-table :data="tableData" ref="refTable" style="width: 100%"
        @selection-change="handleSelectionChange" @expand-change="readInform" :row-key="getRowKeys"
        :expand-row-keys="expands" @row-click="clickTable" :show-overflow-tooltip="true" border>
        <el-table-column type="selection" width="55" />
        <el-table-column type="expand">
          <template #default="props">
            <div m="4" style="margin-left: 120px">
              <p m="t-0 b-2">{{ props.row.content }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="消息标题" prop="title" />
        <el-table-column label="推送模板" prop="type">
          <template #default="item">
            <el-text v-if="item.row.type == 0" class="mx-1" type="success">支付通知</el-text>
            <el-text v-if="item.row.type == 1" class="mx-1" type="default">物流通知</el-text>
            <el-text v-if="item.row.type == 2" class="mx-1" type="warning">平台公告</el-text>
            <el-text v-if="item.row.type == 3" class="mx-1" type="primary">优惠促销</el-text>
          </template>
        </el-table-column>
        <el-table-column label="发送时间" prop="sendAt" />
        <el-table-column label="是否已读" prop="isRead">
          <template #default="props">
            <el-text v-if="!props.row.isRead" class="mx-1" type="warning">未读</el-text>
            <el-text v-else class="mx-1" type="success">已读</el-text>
          </template>
        </el-table-column>
        <!--        <el-table-column label="操作" prop="isRead">-->
        <!--          <el-button type="danger" plain @click="handleEnlist" style="margin-left: 20px">-->
        <!--            报名-->
        <!--          </el-button>-->
        <!--        </el-table-column>-->
      </el-table>
      <!-- 分页器 -->
      <smartPager v-model:current-page="page" v-model:page-size="rows" :total="total" @change="pageChange" />
    </div>
  </div>
  <Enlist v-model="isShowDialog" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { RequestShopGetMes, RequestShopReadMes, RequestShopAllReadMes, RequestShopDelAllMes } from '@/api/path/index.js';
const expands = ref<any>([]);
const tableData = ref([]);
const total = ref();
const page = ref(1);
const rows = ref(10);
onMounted(() => {
  requestShopGetMes()
});
const requestShopGetMes = async () => {
  const a = await RequestShopGetMes({
    shopId: localStorage.getItem('ShopId'),
    page: page.value,
    rows: rows.value,
  });
  tableData.value = a.resultObj.shopMessages;
  total.value = a.resultObj.allCount;
};
/**
 * 表格导航列表
 */
const nav_list = ref([
  {
    class: ['navlist', 'nav_li'],
    text: '通知',
    status: '',
    num: 0,
  },
]);
const refTable = ref();
const clickTable = (row: any, index: number, e: any) => {
  refTable.value.toggleRowExpansion(row);
};
/**
 * 表格导航点击事件
 */
const navChange = (item: any) => {
  for (let i = 0; i < nav_list.value.length; i++) {
    const filteredClasses = nav_list.value[i].class.filter((className) => className !== 'navlist');
    nav_list.value[i].class = filteredClasses;
  }
  item.class.push('navlist');
};
const parentBorder = ref(false);
// 表格多选事件
const delIds = ref([]);
const handleSelectionChange = (selection: any) => {
  delIds.value = [];
  for (let i = 0; i < selection.length; i++) {
    delIds.value.push(selection[i].id);
  }
  console.log('批量删除', delIds.value);
};
/**
 * 单条已读
 */
const readInform = async (row: any, expandedRows: any) => {
  if (expandedRows.length != 0) {
    // 只展开一行//说明展开了
    expands.value = [];
    if (row) {
      expands.value.push(row.id); // 只展开当前行id
      //  判断是否未读，未读则发送请求改为已读
      if (!expandedRows[0].isRead) {
        const a = await RequestShopReadMes(expands.value[0]);
        if (a.msg == '操作成功！') {
          row.isRead = true;
        }
      }
    }
    //  this.tablaData(row.eqId)  这里可以调用接口数据渲染
  } else {
    // 说明收起了
    expands.value = [];
  }
};
const getRowKeys = (row: any) => {
  return row.id; //这里看这一行中需要根据哪个属性值是id
};
const allRead = async () => {
  const a = await RequestShopAllReadMes(localStorage.getItem('ShopId'));
  if (a.msg == '操作成功！') {
    for (let i = 0; i < tableData.value.length; i++) {
      tableData.value[i].isRead = true;
    }
  }
};
const DelAllMes = async () => {
  // const a = await delIds.value
  if (delIds.value.length != 0) {
    const formimgs = new FormData();
    formimgs.append('ids', delIds.value);
    const a = await RequestShopDelAllMes(formimgs);
    if (a.msg == '操作成功！') {
      ElMessage.success('操作成功');
      requestShopGetMes()
    } else {
      ElMessage.error('操作失败');
    }
  } else {
    ElMessage.error('请选择需要删除的信息');
  }
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestShopGetMes()
};

/************************参与报名*****************************/
import Enlist from './Enlist.vue';
const isShowDialog = ref(false);
const handleEnlist = () => {
  isShowDialog.value = true;
};
</script>

<style scoped lang="scss">
.g-container {
  width: 100%;
  padding: 0 16px 0;
  box-sizing: border-box;
  height: calc(100% - 80px);
  background: #fff;
  margin-top: 10px;
  overflow: hidden;

  .inform_btn {
    height: 80px;
    display: flex;
    align-items: center;
  }

  .forbidden {
    background: #fff;
    margin-left: 20px;
  }
}

.nav_ul {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cacaca;
  margin-top: 30px;

  .nav_li {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    border-bottom: 2px solid #0f58dc;
  }

  .navlist {
    width: 100px;
  }
}

::v-deep .el-table--fit {
  height: calc(100% - 220px) !important;
}
</style>
